// import md5 from "js-md5";
import { useState, useEffect } from "react";
import { Button, Form, Input, message } from "antd";
import { useNavigate } from "react-router-dom";
import { Login } from "@/api/interface";
import { loginApi } from "@/api/modules/login";
import { getCaptchaAPI } from "@/api/modules/code";
import { HOME_URL } from "@/config/config";
import { connect } from "react-redux";
import { setToken, setUserInfo } from "@/redux/modules/global/action";
import { useTranslation } from "react-i18next";
import { setTabsList } from "@/redux/modules/tabs/action";
import { UserOutlined, LockOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { getUserInfo } from "@/utils/getUserInfo";
const LoginForm = (props: any) => {
	const { t } = useTranslation();
	const { setToken, setTabsList, setUserInfo } = props;
	const navigate = useNavigate();
	const [form] = Form.useForm();
	const [loading, setLoading] = useState<boolean>(false);
	const [captchaSVG, setCaptchaSVG] = useState<string>("");
	// 登录
	const onFinish = async (loginForm: Login.ReqLoginForm) => {
		try {
			console.log(loginForm, form, "loginForm");
			setLoading(true);
			// loginForm.password = md5(loginForm.password);
			const { data } = await loginApi(loginForm);
			setToken(data);
			setTabsList([]);
			message.success("登录成功！");
			getUserInfo().then(res => {
				setUserInfo(res);
			});
			navigate(HOME_URL);
		} finally {
			setLoading(false);
		}
	};
	const onFinishFailed = (errorInfo: any) => {
		console.log("Failed:", errorInfo);
	};
	const getCaptcha = async () => {
		// 刷新获取图形验证码
		try {
			const { data, code, msg } = await getCaptchaAPI();
			if (code === 0) {
				setCaptchaSVG(data as string);
			} else {
				message.error(msg || "系统开小差了，请稍后再试！");
			}
		} catch (error) {
			console.log(error);
		}
	};
	useEffect(() => {
		form.setFieldsValue({ phone: "15886357069", password: "123456" });
		getCaptcha();
	}, []);
	return (
		<Form
			form={form}
			name="basic"
			labelCol={{ span: 5 }}
			initialValues={{ remember: true }}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			size="large"
			autoComplete="off"
		>
			<Form.Item name="phone" rules={[{ required: true, message: "请输入手机号" }]}>
				<Input placeholder="用户手机号" prefix={<UserOutlined />} />
			</Form.Item>
			<Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
				<Input.Password autoComplete="new-password" placeholder="输入密码" prefix={<LockOutlined />} />
			</Form.Item>
			<Form.Item name="captcha" rules={[{ required: true, message: "请输入图形验证码" }]}>
				<div style={{ height: "41px", display: "flex" }}>
					<Input placeholder="输入图形验证码" maxLength={4} prefix={<LockOutlined />} onPressEnter={() => form.submit()} />
					<div className="captchaSVG" onClick={getCaptcha} dangerouslySetInnerHTML={{ __html: captchaSVG }} />
				</div>
			</Form.Item>
			<Form.Item className="login-btn">
				<Button
					onClick={() => {
						form.resetFields();
					}}
					icon={<CloseCircleOutlined />}
				>
					{t("login.reset")}
				</Button>
				<Button type="primary" htmlType="submit" loading={loading} icon={<UserOutlined />}>
					{t("login.confirm")}
				</Button>
			</Form.Item>
		</Form>
	);
};

const mapDispatchToProps = { setToken, setTabsList, setUserInfo };
export default connect(null, mapDispatchToProps)(LoginForm);
